<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    {% include 'public/static_top.html' %}
	<style type="text/css">
		/*轮播图*/
		.mui-slider-item img {
			width: 100%;
			height: 250px;
		}
		
		/*搜索框*/
		.mui-input-row {
			margin-top: 10px;
		}
		input[type=search] {
			margin-bottom: 0px;
			background-color: #FFFFFF;
		}
		
		/*图书列表*/
		.book_list {
			margin-top: 10px;
			background-color: #FFFFFF;
		}
		.book_list .list_title {
			padding: 10px 20px;
			font-weight: bold;
		}
	</style>
</head>

<body>
	<!--banner-->
	<div id="slider" class="mui-slider" >
		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="{{ banners[-1].content_url }}">
					<img src="{{ banners[-1].imgurl.url }}">
				</a>
			</div>
			<!-- 第一张 -->
            {% for banner in banners %}
			<div class="mui-slider-item">
				<a href="{{ banner.content_url }}">
					<img src="{{ banner.imgurl.url }}">
				</a>
			</div>
            {% endfor %}
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="{{ banners[0].content_url }}">
					<img src="{{ banners[0].imgurl.url }}">
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator">
            {% for banner in banners %}
                <div class="mui-indicator {% if loop.index==1 %} mui-active {% endif %}"></div>
            {% endfor %}
		</div>
	</div>
	
	<div class="mui-input-row mui-search">
		<input type="search" class="mui-input-clear" placeholder="搜索图书" id="words">
	</div>
	
	<!--首页展示分类展示-->
    {% for category in categories %}
	<div class="book_list">
		<div class="list_title">{{ category.name }}</div>
		<ul class="mui-table-view">
            {% for book in category.books %}
			<li class="mui-table-view-cell mui-media">
				<a href="{{ url('library:book_detail', args=(book.id, )) }}">
					<img class="mui-media-object mui-pull-left" src="{{ book.cover.url }}">
					<div class="mui-media-body">
						{{ book.name }}
						<p class="mui-ellipsis">{{ book.author }}</p>
						<textarea disabled>{{ book.content_introduction }}</textarea>
					</div>
				</a>
			</li>
            {% endfor %}
		</ul>
	</div>
    {% endfor %}

	<!--底部菜单栏-->
	{% include 'public/footer.html' %}

    {% include 'public/static_bottom.html' %}
	<script type="text/javascript">
        document.querySelector('nav.mui-bar>a.mui-tab-item').classList.add('mui-active');
		mui.init({
			swipeBack: true
		});
		
//		轮播图自动轮播
		var slider = mui("#slider");
		slider.slider({
			interval: 3000
		});
		
//		点击探索框跳至搜索页
		document.querySelector("input#words").addEventListener('focus', function() {
			 window.location = "{{ url('library:search') }}";
		})
	</script>
</body>

</html>
